import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {Button} from 'antd';

function UserList() {
    const [data, setData] = useState<{ id: string, username: string, sex: string, age: string, registertime: string }[]>([]);
    const [id, setId] = useState('');

    const fetchData = async () => {
        try {

            const index = 0; // 假设这是你的索引值
            const size = 10; // 假设这是你的每页大小

            const response = await axios.post(`http://localhost:8080/api/users/page`, {
                index: index,
                size: size
            });

            setData(response.data);
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };

    const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        fetchData();
    };

    return (
        <div>
            <h1>Data Table</h1>
            <form onSubmit={handleFormSubmit}>
                <label htmlFor="id">Enter ID:</label>
                <input
                    type="text"
                    id="id"
                    value={id}
                    onChange={(event) => setId(event.target.value)}
                />
                <button type="submit">Fetch Data</button>
            </form>
            <table>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    {/* Add more table headers as needed */}
                </tr>
                </thead>
                <tbody>
                {data.map(item => (
                    <tr key={item.id}>
                        <td>{item.id}</td>
                        <td>{item.username}</td>
                        <td>{item.sex}</td>
                        <td>{item.age}</td>
                        <td>{item.registertime}</td>
                        {/* Render additional data fields here */}
                    </tr>
                ))}
                </tbody>
            </table>
        </div>
    );

}

export default UserList;
